import ProForm from '@/components/pro-form/index.vue';
import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import { Modal } from 'ant-design-vue';
import dayjs from 'dayjs';
import { defineComponent, PropType, reactive, ref } from 'vue';

export default defineComponent({
  props: {
    question: Object as PropType<QuestionType>,
    language: String as PropType<LanguageTypeString>,
    open: Boolean,
    width: [String, Number] as PropType<string | number>,
  },
  emits: ['update:open'],
  setup(props, { emit }) {
    const { question, open, width } = props;
    const formRef = ref();
    const formData = reactive<any>({});
    const labelColStyle = { style: { width: '120px' } };
    const showModal = ref(open || false);
    const hideQuestionRef = ref(false);
    const dateFormat = 'YYYY-MM-DD';
    const columns: any = reactive([
      {
        title: '隐藏题目',
        dataIndex: 'hideQuestion',
        colSpan: 20,
        valueType: 'switch',
        value: question?.displayRule?.hideQuestion ? true : false,
        customProps: {
          onChange: (isHide: any) => setPageComponentControlStatus(isHide),
        },
      },
      {
        title: '时间限制',
        dataIndex: 'timeLimit',
        colSpan: 20,
        valueType: 'switch',
        value: question?.displayRule?.timeLimit ? true : false,
        customProps: {
          onChange: (isTimeLimit: any) => timeLimitChange(isTimeLimit),
        },
      },
      {
        title: '数据字段',
        dataIndex: 'timeDataField',
        colSpan: 12,
        valueType: 'text',
        value: question?.displayRule?.timeDataField,
      },
      {
        title: '时间范围',
        dataIndex: 'timeFrame',
        colSpan: 12,
        valueType: 'rangePicker',
        value:
          question?.displayRule?.timeFrame && question.displayRule.timeFrame.length > 0
            ? [
                dayjs(question.displayRule.timeFrame[0], dateFormat),
                dayjs(question.displayRule.timeFrame[1], dateFormat),
              ]
            : [],
        customProps: {
          style: { width: '100%' },
        },
      },
      {
        title: '门店限制',
        dataIndex: 'storeLimit',
        colSpan: 12,
        valueType: 'switch',
        value: question?.displayRule?.storeLimit ? true : false,
        customProps: {
          onChange: (isStoreLimit: any) => storeChange(isStoreLimit),
        },
      },
      {
        title: '城市限制',
        dataIndex: 'cityLimit',
        colSpan: 11,
        valueType: 'switch',
        value: question?.displayRule?.cityLimit ? true : false,
        customProps: {
          onChange: (isCityLimit: any) => cityChange(isCityLimit),
        },
      },
      {
        title: '门店',
        dataIndex: 'storeFile',
        colSpan: 12,
        valueType: 'upload',
      },
      {
        title: '城市',
        dataIndex: 'cityFile',
        colSpan: 11,
        valueType: 'upload',
      },
      {
        title: '回收上限',
        dataIndex: 'recyclingLimit',
        colSpan: 12,
        valueType: 'switch',
        value: question?.displayRule?.recyclingLimit ? true : false,
        customProps: {
          onChange: (isRecyclingLimit: any) => recyclingLimitChange(isRecyclingLimit),
        },
      },
      {
        title: '渠道控制',
        dataIndex: 'channelLimit',
        colSpan: 12,
        valueType: 'switch',
        value: question?.displayRule?.channelLimit ? true : false,
        customProps: {
          onChange: (isChannelLimit: any) => channelChange(isChannelLimit),
        },
      },
      {
        title: '每个门店上线数量',
        dataIndex: 'upperLimitNum',
        colSpan: 12,
        valueType: 'number',
        value: question?.displayRule?.upperLimitNum,
        customProps: {
          style: { width: '100%' },
        },
      },
      {
        title: ' ',
        dataIndex: 'channelList',
        colSpan: 12,
        valueType: 'checkboxGroup',
        value: question?.displayRule?.channelList,
        options: [
          {
            label: 'ALI-MOP',
            value: '1',
          },
          {
            label: 'ELE',
            value: '2',
          },
          {
            label: 'MOD',
            value: '3',
          },
          {
            label: 'MOP',
            value: '4',
          },
          {
            label: 'MT-MOD',
            value: '5',
          },
          {
            label: 'WECHAT-MOP',
            value: '6',
          },
        ],
      },
    ]);

    const timeLimitChange = (isTimeLimit: boolean) => {
      if (hideQuestionRef.value) {
        columns[1].value = false;
        columns[1].disabled = columns[2].disabled = columns[3].disabled = true;
      } else {
        columns[1].value = isTimeLimit;
        columns[1].disabled = false;
        columns[2].disabled = columns[3].disabled = !isTimeLimit;
      }
    };

    const storeChange = (isStoreLimit: boolean) => {
      if (hideQuestionRef.value) {
        columns[4].value = false;
        columns[4].disabled = columns[6].disabled = true;
      } else {
        columns[4].value = isStoreLimit;
        columns[4].disabled = false;
        columns[6].disabled = !isStoreLimit;
        columns[5].value = false;
        columns[7].disabled = true;
      }
    };

    const cityChange = (isCityLimit: boolean) => {
      if (hideQuestionRef.value) {
        columns[5].value = false;
        columns[5].disabled = columns[7].disabled = true;
      } else {
        columns[5].value = isCityLimit;
        columns[5].disabled = false;
        columns[7].disabled = !isCityLimit;
        columns[4].value = false;
        columns[6].disabled = true;
      }
    };

    const recyclingLimitChange = (isRecyclingLimit: boolean) => {
      if (hideQuestionRef.value) {
        columns[8].value = false;
        columns[8].disabled = columns[10].disabled = true;
      } else {
        columns[8].value = isRecyclingLimit;
        columns[8].disabled = false;
        columns[10].disabled = !isRecyclingLimit;
      }
    };

    const channelChange = (isChannelLimit: boolean) => {
      if (hideQuestionRef.value) {
        columns[9].value = false;
        columns[9].disabled = columns[11].disabled = true;
      } else {
        columns[9].value = isChannelLimit;
        columns[9].disabled = false;
        columns[11].disabled = !isChannelLimit;
      }
    };

    const setPageComponentControlStatus = (hideQuestion: boolean) => {
      hideQuestionRef.value = hideQuestion;
      columns[0].value = hideQuestionRef.value;
      timeLimitChange(hideQuestion);
      storeChange(hideQuestion);
      cityChange(hideQuestion);
      recyclingLimitChange(hideQuestion);
      channelChange(hideQuestion);
    };

    setPageComponentControlStatus(false);

    const onCancel = () => {
      closeModal();
    };

    const onOk = () => {
      console.log('ok formData:', formData);

      closeModal();
    };

    const closeModal = () => {
      showModal.value = false;
      emit('update:open', showModal.value);
    };
    return () => {
      return (
        <Modal
          v-model:open={showModal.value}
          width={width}
          onCancel={onCancel}
          onOk={onOk}
          title="题目展示设置"
        >
          <ProForm ref={formRef} model={formData} labelCol={labelColStyle} columns={columns} />
        </Modal>
      );
    };
  },
});
